<template>
<q-dialog persistent :maximized="$q.platform.is.mobile" fixed v-model="isMemSeleteDialog">
    <q-layout view="Lhh lpR fff" container class="bg-dark hide-scrollbar">
        <q-header class="bg-grey-10">

            <q-toolbar>
                <q-toolbar-title>选择成员</q-toolbar-title>
                <q-space />

                <q-btn dense flat icon="close" @click="handleMemeberSelectClose">
                </q-btn>
            </q-toolbar>

        </q-header>

        <q-footer v-if="selectedmemebers.length>0" class="bg-grey-10 text-white q-pa-sm shadow-up-7">
            <div class="mobile-only">
                <span class="text-white text-h6">选择的成员</span><span class="text-caption q-mr-sm">(点击头像可删除)</span>

                <q-separator class="q-my-sm" color="grey-7"></q-separator>
                <div class="q-pa-sm">
                    <q-avatar v-for="item,index in selectedmemebers" :key="index" size="35px" class="q-mr-sm" @click="removememberTicked(item)">
                        <img :src="item.avatar">
                    </q-avatar>
                </div>
                <q-separator class="q-my-sm" color="grey-7"></q-separator>
            </div>

            <q-toolbar inset>

                <q-space></q-space>
                <q-btn outline class="q-px-md" @click="confirmMembers"> 确认{{selectedmemebers.length>0?'·'+selectedmemebers.length:''}}</q-btn>
            </q-toolbar>
        </q-footer>

        <q-page-container>
            <q-page padding class="bg-dark row hide-scrollbar">

                <q-tree class="text-subtitle1" :class="$q.platform.is.desktop?'col-6':'full-width'" ref="memberlistTree" @update:ticked="memberTicked" @update:selected="memberSelected" dark :nodes="departmentlist" node-key="name" :selected.sync="selectedmemebers" :ticked.sync="ticked" labelKey="name" tick-strategy="leaf" accordion />

                <q-page-sticky expand position="right" style="full-height;justify-centent:start !importent;width:200px" class="column justify-start desktop-only">
                    <q-scroll-area class="fit q-pa-sm">
                        <span class="text-white text-h6">选择的成员</span>
                        <q-separator class="q-my-sm" color="grey-7"></q-separator>
                        <div :class="$q.platform.is.desktop?'':''" class="column full-width  q-gutter-sm">
                            <div v-for="item,index in selectedmemebers" :key="index" class="row items-center justify-between">
                                <div class="row items-center">
                                    <q-avatar size="25px" class="q-mr-sm">
                                        <img :src="item.avatar">
                                    </q-avatar>
                                    <div class="text-caption text-white row no-wrap items-center ">
                                        {{item.name.length>=10?item.name.substring(0,9)+'……':item.name}}
                                    </div>
                                </div>

                                <q-btn @click="removememberTicked(item)" color="grey-7" icon="close" flat dense></q-btn>

                            </div>
                        </div>
                    </q-scroll-area>

                </q-page-sticky>

            </q-page>
        </q-page-container>
    </q-layout>

</q-dialog>
</template>

<script>
import {
    getDepMember,
    getDepartmentInfo
} from "assets/api/staff";
export default {
    name: 'MemberSelect',
    props: {
        isMemSeleteDialog: {
            default: false
        },
        memberList: {
            type: Array
        },
        taskMembers:{
            type: Array
        }
    },
    data() {
        return {
            selected: [],
            ticked: [],
            expanded: [],
            selectedmemebers: [],
            departmentlist: [{
                name: '一方映画',
                children: []
            }],
        }
    },
    mounted() {

    },
    watch: {
        isMemSeleteDialog: function (val) {
            if (val) {
              console.log('加载member');
                this.loadMemberList()
                this.reTicked()
            }
        },
        memberList:function(val){
            if(val){

            }
        }
    },
    methods: {
        reTicked() {
            setTimeout(() => {
                console.log('member', this.memberList);
                if(this.memberList.length>0){
                  this.memberList.forEach(item => {
                    this.ticked.push(item.username)
                })
                this.selectedmemebers = this.memberList;
                }



            }, 500)

        },
        loadMemberList() {
            console.log(this.memberList);
            this.departmentlist[0].children = this.taskMembers;
            setTimeout(() => {
                this.$refs.memberlistTree.setExpanded('一方映画', true)
            }, 500)

        },
        confirmMembers() {
            if (this.selectedmemebers.length > 0) {
              this.$emit('update:memberList',this.selectedmemebers)

                this.trickMemberSelect('confirm', this.selectedmemebers);
                this.selectedmemebers = [];
                this.ticked = []
            }

        },
        memberSelected(val) {
            console.log('select', val);
            this.$refs.memberlistTree.setExpanded(val, !this.$refs.memberlistTree.isExpanded(val))
        },
        removeSelected(item) {
            let index = this.selectedmemebers.findIndex(i => i.name == item.name);
            if (index != -1) {
                this.selectedmemebers.splice(index, 1);
            }
        },

        removememberTicked(item) {
            let index = this.selectedmemebers.findIndex(i => i.name == item.name);
            if (index != -1) {
                this.selectedmemebers.splice(index, 1);
                this.$refs.memberlistTree.setTicked(item.name, false)
            }
        },
        trickMemberSelect(msg, data) {
            this.$emit('update', msg, data)
        },
        memberTicked(val) {
            console.log(val);
            let selected = []
            val.forEach(item => {
                let member = this.$refs.memberlistTree.getNodeByKey(item);
                member.permission = 4;
                selected.push(member)
            })
            this.selectedmemebers = selected;

            console.log('ticked', selected);
        },
        handleMemeberSelectClose() {
            this.selectedmemebers = [];
            this.ticked = [];
            this.trickMemberSelect('close')
        },
    }
}
</script>
